<template>
	<view class="finance">
		<view class="title">
			<text class="ys-3">账号</text>
			<text class="ys-3">数量</text>
			<text class="ys-4">时间</text>
			<text class="ys-2 text-right">备注</text>
		</view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in financeList" :key="item.id" >
				<text class="ys-3">{{item.username}}</text>
				<text class="ys-3">{{Number(item.num)}}</text>
				<text class="ys-4">{{item.time}}</text>
				<text class="ys-2 text-right">{{item.remarks}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { FinanceList } from '../../api/api.js'
	export default {
		data() {
			return {
				financeList: []
			}
		},
		onLoad() {
			this.FinanceList()
		},
		methods: {
			
			FinanceList(){
				FinanceList().then(res=>{
					console.log(res)
					this.financeList = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.finance {
		.title {
			padding: 5%;
			display: flex;
			font-size: 16px;
		}

		.ys-4 {
			width: 33.33333%;
		}

		.ys-3 {
			width: 25%;
			word-break: break-all;
			text-align: center;
		}

		.ys-2 {
			width: 16.666667%;
		}

		.text-right {
			text-align: right;
		}

		.list {
			padding: 5%;
			padding-top: 0;
			background-color: #FFFFFF;

			.list-item {
				display: flex;
				font-size: 14px;
				padding: 30rpx 0;
				border-bottom: 1px solid #efefef;
			}
		}
	}
</style>
